<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-07-23 17:28:22
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-09-13 17:25:42
 * @Description: 
 * @FilePath: \parking-mini\src\pages\vip_type.vue
-->
<template>
    <div class="container">
        <div class="list">
            <div class="item" v-for="item in list" :key="item.id">
                <div class="item-left">
                    <div class="item-name">{{ item.name }}</div>
                    <div class="item-park-name">
                        <img :src="imgs.vip_location" alt="" />
                        {{ item.dadaParkName }}
                    </div>
                    <div class="item-amount">
                        <img :src="imgs.vip_price" alt="" />
                        ￥{{ item.amount }}/月
                    </div>
                </div>
                <div v-if="item.sellOut === 2" class="item-right disabled">已售罄</div>
                <div v-else class="item-right" @click="toVipEdit(item.id)">去开卡</div>
            </div>
        </div>
    </div>
</template>
<script>
import { getVipTypeListAPI } from "../api/api";

const app = getApp();
export default {
    data() {
        return {
            imgs: app.globalData.imgs,
            list: [],
        };
    },
    onShareAppMessage() {},
    onLoad() {
        this.init();
    },
    methods: {
        onPullDownRefresh() {
            this.init();
            uni.stopPullDownRefresh();
        },
        init() {
            wx.showLoading({
                title: "查询中...",
            });
            getVipTypeListAPI()
                .then((res) => {
                    this.list = res;
                    wx.hideLoading();
                })
                .catch((err) => {
                    wx.hideLoading();
                });
        },
        toVipEdit(id) {
            if (wx.getStorageSync("parking_openid")) {
                uni.$u.route("pages/vip_edit", { id });
            } else {
                uni.$u.route("/pages/login");
            }
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";
</style>
<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx;
    .list {
        width: 100%;
        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #f8f8f8;
            margin-bottom: 20rpx;
            box-sizing: border-box;
            padding: 30rpx;
            border-radius: 20rpx;
            font-size: 28rpx;
            color: #666;
            .item-left {
                .item-name {
                    font-size: 34rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 20rpx;
                }
                .item-park-name {
                    margin-bottom: 20rpx;
                    display: flex;
                    align-items: center;
                    img {
                        width: 30rpx;
                        height: 30rpx;
                        margin-right: 10rpx;
                    }
                }
                .item-amount {
                    display: flex;
                    align-items: center;
                    img {
                        width: 30rpx;
                        height: 30rpx;
                        margin-right: 10rpx;
                    }
                }
            }
            .item-right {
                background-color: #0081fe;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 140rpx;
                height: 60rpx;
                border-radius: 30rpx;
                &.disabled {
                    background-color: #ccc;
                }
            }
        }
    }
}
</style>
